/* ==========================================================
   One Team Across Three Centers: Texas · Hyderabad · Ajman
   File: wwwroot/css/leadership-centers.css
   Used by: Views/Partials/blocklist/Components/leadershipCentersBlock.cshtml
   ========================================================== */
.ld-ctr {
  --lt-navy: #14256b;
  --lt-text: #2b3352;
  --lt-gutter: 4.7vw;
  --lt-ease: cubic-bezier(.65, 0, .35, 1);
  --lt-ease-out: cubic-bezier(.16, 1, .3, 1);

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  background: var(--lt-navy);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
.ld-ctr *, .ld-ctr *::before, .ld-ctr *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- background photos (1 full, or 2–3 cut on the diagonal) ---------- */
.ld-ctr__bg { position: absolute; inset: 0; z-index: -2; }
.ld-ctr__slice { position: absolute; inset: 0; overflow: hidden; }
.ld-ctr__slice img {
  position: absolute;
  inset: -3%;
  width: 106%; height: 106%;
  object-fit: cover;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1);
  will-change: transform;
}
/* each slice box only covers its strip, so every photo is centred in its own strip */
.ld-ctr__bg--2 .ld-ctr__slice:nth-child(1) { right: 42%; clip-path: polygon(0 0, 100% 0, 79.3% 100%, 0 100%); }
.ld-ctr__bg--2 .ld-ctr__slice:nth-child(2) { left: 46%; clip-path: polygon(22.2% 0, 100% 0, 100% 100%, 0 100%); }
.ld-ctr__bg--3 .ld-ctr__slice:nth-child(1) { right: 61.3%; clip-path: polygon(0 0, 100% 0, 67.2% 100%, 0 100%); }
.ld-ctr__bg--3 .ld-ctr__slice:nth-child(2) { left: 26%; right: 24%; clip-path: polygon(25.4% 0, 100% 0, 76% 100%, 0 100%); }
.ld-ctr__bg--3 .ld-ctr__slice:nth-child(3) { left: 64%; clip-path: polygon(33.3% 0, 100% 0, 100% 100%, 0 100%); }
/* thin glowing seams between the photos */
.ld-ctr__seams { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ld-ctr__seams line { stroke: rgba(255, 236, 214, .75); stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(255, 210, 160, .8)); }

/* navy wash: strong on the left / top where the heading sits */
.ld-ctr__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(20, 37, 107, .82) 0%, rgba(20, 37, 107, .55) 28%, rgba(20, 37, 107, .08) 48%, rgba(20, 37, 107, 0) 100%),
    linear-gradient(180deg, rgba(20, 37, 107, .25) 0%, rgba(20, 37, 107, 0) 40%, rgba(10, 20, 60, .25) 100%);
}

/* ---------- content ---------- */
.ld-ctr__inner { position: relative; padding: clamp(28px, 2.4vw, 64px) var(--lt-gutter) clamp(22px, 1.9vw, 50px); }
.ld-ctr__head { max-width: 40em; margin-bottom: clamp(26px, 8.6vw, 220px); }
.ld-ctr__eyebrow { margin-bottom: clamp(10px, 1.1vw, 28px); font-size: clamp(11px, .85vw, 22px); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.ld-ctr__heading { font-size: clamp(24px, 2.1vw, 56px); font-weight: 600; line-height: 1.25; color: #fff; word-spacing: .08em; }
.ld-ctr__intro {
  max-width: 34em;
  margin-top: clamp(10px, 1.1vw, 28px);
  font-family: "DM Sans", "Poppins", sans-serif;
  font-size: clamp(13px, .9vw, 23px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

/* ---------- glass box ---------- */
.ld-ctr__box {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--lt-navy);
}
.ld-ctr__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: clamp(14px, 1.45vw, 38px) clamp(14px, 1.5vw, 38px) clamp(6px, .6vw, 16px);
  border: 0;
  background: none;
  font: 600 clamp(13px, 1vw, 26px) "Poppins", sans-serif;
  text-align: left;
  color: var(--lt-navy);
  cursor: pointer;
}
.ld-ctr__box:not(.is-open) .ld-ctr__toggle { padding-bottom: clamp(14px, 1.45vw, 38px); }
.ld-ctr__toggle:focus-visible { outline: 2px solid #ff9a45; outline-offset: -2px; }
.ld-ctr__icon { position: relative; flex: none; width: clamp(10px, .75vw, 18px); height: clamp(10px, .75vw, 18px); transition: transform .6s var(--lt-ease-out); }
.ld-ctr__icon i {
  position: absolute; top: 50%; left: 0;
  width: 100%; height: 2px;
  background: var(--lt-navy);
  transform: translateY(-50%);
  transition: transform .5s var(--lt-ease), opacity .4s ease;
}
.ld-ctr__icon i:last-child { transform: translateY(-50%) rotate(90deg); }
.ld-ctr__box.is-open .ld-ctr__icon i:last-child { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.ld-ctr__toggle:hover .ld-ctr__icon { transform: rotate(90deg); }
.ld-ctr__box.is-open .ld-ctr__toggle:hover .ld-ctr__icon { transform: none; }

.ld-ctr__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .75s var(--lt-ease); }
.ld-ctr__box.is-open .ld-ctr__panel { grid-template-rows: 1fr; }
.ld-ctr__panel > div { overflow: hidden; }
.ld-ctr__content {
  padding: 0 clamp(14px, 1.5vw, 38px) clamp(16px, 1.6vw, 40px);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .4s ease;
}
.ld-ctr__box.is-open .ld-ctr__content { opacity: 1; transform: none; transition: opacity .6s ease .2s, transform .8s var(--lt-ease-out) .2s; }
.ld-ctr__title { margin: clamp(4px, .5vw, 12px) 0 clamp(12px, 1.3vw, 32px); font-size: clamp(16px, 1.3vw, 34px); font-weight: 600; line-height: 1.3; color: var(--lt-navy); }

/* ---------- table ---------- */
.ld-ctr__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ld-ctr__c1 { width: 20.5%; }
.ld-ctr__c2 { width: 79.5%; }
.ld-ctr__table th,
.ld-ctr__table td {
  padding: clamp(10px, 1.05vw, 26px) clamp(10px, 1.05vw, 26px);
  text-align: left;
  vertical-align: middle;
  font-size: clamp(12px, .8vw, 21px);
  line-height: 1.5;
}
.ld-ctr__table thead th { background: #fdf3ea; font-weight: 500; color: var(--lt-navy); }
.ld-ctr__table tbody tr { background: rgba(255, 255, 255, .94); border-top: 1px solid #ece7e2; transition: background-color .4s ease; }
.ld-ctr__table tbody tr:hover { background: #fff; }
.ld-ctr__table tbody td { font-family: "DM Sans", "Poppins", sans-serif; color: var(--lt-text); }
.ld-ctr__table tbody th { font-weight: 600; color: var(--lt-navy); }
.ld-ctr__table tbody tr { opacity: 0; transform: translateY(8px); }
.ld-ctr__box.is-open .ld-ctr__table tbody tr {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease calc(.3s + var(--ri, 0) * .08s), transform .7s var(--lt-ease-out) calc(.3s + var(--ri, 0) * .08s), background-color .4s ease;
}

/* ---------- entrance ---------- */
.ld-ctr.js-reveal .ld-ctr__slice { opacity: 0; transform: scale(1.06); }
.ld-ctr.js-reveal.is-visible .ld-ctr__slice {
  opacity: 1;
  transform: none;
  transition: opacity 1.1s ease calc(var(--si, 0) * .15s), transform 1.8s var(--lt-ease-out) calc(var(--si, 0) * .15s);
}
.ld-ctr.js-reveal .ld-ctr__fx { opacity: 0; transform: translateY(20px); }
.ld-ctr.js-reveal.is-visible .ld-ctr__fx {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease calc(.25s + var(--fd, 0s)), transform 1.1s var(--lt-ease-out) calc(.25s + var(--fd, 0s));
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .ld-ctr { --lt-gutter: 32px; } }
@media (max-width: 900px) {
  .ld-ctr { --lt-gutter: 24px; }
  .ld-ctr__shade { background: linear-gradient(180deg, rgba(20, 37, 107, .85) 0%, rgba(20, 37, 107, .55) 45%, rgba(20, 37, 107, .35) 100%); }
  .ld-ctr__head { margin-bottom: 120px; }
}
@media (max-width: 640px) {
  .ld-ctr { --lt-gutter: 20px; }
  .ld-ctr__head { margin-bottom: 80px; }
  .ld-ctr__table, .ld-ctr__table tbody, .ld-ctr__table tr, .ld-ctr__table th, .ld-ctr__table td { display: block; width: 100%; }
  .ld-ctr__table colgroup, .ld-ctr__table thead { display: none; }
  .ld-ctr__table tbody tr { display: flex; flex-direction: column-reverse; margin-bottom: 8px; border-top: 0; border-left: 3px solid #ff9a45; }
  .ld-ctr__table tbody th { padding-bottom: 2px; font-size: 14px; }
  .ld-ctr__table tbody td { padding-top: 2px; }
}